<template>
    <div class="container-hearder">
        <div class="left" @click="searchMain">
            <div class="logo"><img :src="logo" alt="潮汕文化习俗网" title="潮汕文化习俗网"></div>
            <div class="title">潮汕文化习俗网</div>
        </div>

        <div class="right">
            <div class="right-r">
                <div @click="toPersonal" v-if="userStore.isLoggedIn" class="inner">
                    <img :src="srcToPath(userStore.user.avatar)" alt="潮汕文化习俗网" title="潮汕文化习俗网">
                    <div>{{ userStore.user.username }}</div>
                </div>

                <div v-else @click="toLogin">登录</div>
                <div> <el-button round @click="addArticle">发表</el-button></div>
                <Dark />
            </div>
            <div class="right-r2">
                <div class="dark" >
                    <Dark />
                </div>
                <div @click="addArticle">
                    <el-icon><CirclePlus /></el-icon>
                </div>
                <div @click="toPersonal">
                    <el-icon><Avatar /></el-icon>
                </div>
            </div>
            <div class="search">
                <div> <el-input v-model="keywords" placeholder="请输入..." /></div>
                <div><el-button @click="searchMain">搜索</el-button></div>
            </div>

        </div>
    </div>
</template>
​
<script setup>
import { ref, watch, watchEffect } from 'vue'
import Dark from './useDark.vue'
import logo from '@/assets/logo.png'
import useUserStore from '@/pinia/userStore'
import { useRouter, useRoute } from 'vue-router'

import srcToPath from '@/utils/srcToPath.js'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const keywords = ref('')

watch(keywords, (newV, oldV) => {
    console.log(newV, "=====");
    localStorage.setItem('keywords', newV ?? '')
})

console.log(userStore);
keywords.value = localStorage.getItem('keywords')
const searchMain = () => {
    console.log();
    if (route.path == '/main') {
        router.go(0)

    } else {
        router.push('/main')
    }
}

const toLogin = () => {
    router.push('/login')
}
const addArticle = () => {
    if(userStore.isLoggedIn){
        router.push('/addArticle')
    }else{
        router.push('/login')
    }
}
const toPersonal = () => {
    if(userStore.isLoggedIn){
        router.push('/personal')
    }else{
        router.push('/login')
    }
}
</script>

<style lang="scss" scoped>
.container-hearder {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: var(--el-bg-color);
    padding: 0 5%;

    .left,
    .right,
    .search,
    .right-r {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-gap: 20px;
    }

    .right-r2{
        display: none;
    }
    @media (max-width: 800px) {
        .left {
            .title {
                display: none;
            }

            // flex-direction: column;
            // grid-gap: 2px;
            // font-size: 10px;
            min-width: 100px;
        }

        .right {}

    }

    @media (max-width: 600px) {
        .right-r2 {
            display: flex;
            width: 100%;
            position: fixed;
            justify-content: space-evenly;
            align-items: center;
            // bottom: 10px;
            font-size: 30px;
            bottom: 0;
            left: 0px;
            background-color: var(--el-bg-color);
            padding: 10px 0;
            // padding-left: 30%;
            div{
                text-align: center;
                height: 30px;
                width: 25%;
            }
            .dark{
                position: relative;
                top:-5px
            }
        }
        .right-r{
            display: none;
        }
    }

    .left {
        // margin: 0 100px;
    }

    .search {}

    .right {
        min-width: 70%;
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

}

.inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>